<%--
  Created by IntelliJ IDEA.
  User: 30950
  Date: 2021/3/3
  Time: 13:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui_ext/dtree/dtree.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui_ext/dtree/font/dtreefont.css">
</head>
<body class="childrenBody">
<!-- 搜索条件开始 -->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>查询条件</legend>
</fieldset>
<form class="layui-form" method="post" id="searchFrm">

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">所在城市:</label>
            <div class="layui-input-inline" style="padding: 5px">
                <input type="text" name="city" autocomplete="off" class="layui-input layui-input-inline"
                       placeholder="请输入所在城市" style="height: 30px;border-radius: 10px">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">所在小区:</label>
            <div class="layui-input-inline" style="padding: 5px">
                <input type="text" name="community" autocomplete="off" class="layui-input layui-input-inline"
                       placeholder="请输入所在小区名" style="height: 30px;border-radius: 10px">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">详细地址:</label>
            <div class="layui-input-inline" style="padding: 5px">
                <input type="text" name="address" autocomplete="off" class="layui-input layui-input-inline"
                       placeholder="请输入详细地址" style="height: 30px;border-radius: 10px">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">售价大于:</label>
            <div class="layui-input-inline" style="padding: 5px">
                <input type="number" name="sale" autocomplete="off" class="layui-input layui-input-inline"
                       placeholder="请输入售价" style="height: 30px;border-radius: 10px">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">物业费大于:</label>
            <div class="layui-input-inline" style="padding: 5px">
                <input type="number" name="mgrFee" autocomplete="off" required="number" class="layui-input layui-input-inline"
                       placeholder="请输入物业费" style="height: 30px;border-radius: 10px">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">面积大于:</label>
            <div class="layui-input-inline" style="padding: 5px">
                <input type="text" name="area" autocomplete="off" class="layui-input layui-input-inline"
                       placeholder="请输入房屋面积" style="height: 30px;border-radius: 10px">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">中介公司:</label>
            <div class="layui-input-inline" style="padding: 5px">
                <input type="text" name="company" autocomplete="off" class="layui-input layui-input-inline"
                       placeholder="请输入中介公司" style="height: 30px;border-radius: 10px">
            </div>
        </div>
    </div>
    <div class="layui-form-item" style="text-align: center">
        <button  class="layui-btn layui-btn-normal layui-icon layui-icon-search layui-btn-radius layui-btn-sm" lay-submit lay-filter="doSearch">查询
        </button>
        <button type="reset" class="layui-btn layui-btn-warm layui-icon layui-icon-refresh layui-btn-radius layui-btn-sm">重置
        </button>
    </div>

</form>
<!-- 搜索条件结束 -->
<table id="houseTable" lay-filter="houseTableFilter"></table>

<script id="toolbarHouse" type="text/html">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="add">添加</button>
        <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="delBatch">批量删除</button>
    </div>
</script>

<script id="barHouse" type="text/html">
    <a class="layui-btn layui-btn-xs layui-btn-radius" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs layui-btn-radius" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-xs layui-btn-radius" lay-event="rentHouse">出租房屋</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs layui-btn-radius" lay-event="filesUpload">多图上传</a>
</script>


<!-- 添加和修改的弹出层-->
<div style="display: none;padding: 20px" id="saveOrUpdateDiv">
    <form class="layui-form layui-row layui-col-space10" lay-filter="dataFrm" id="dataFrm">
        <div class="layui-col-md12 layui-col-xs12">
            <div class="layui-row layui-col-space10">
                <div class="layui-col-md9 layui-col-xs7">
                    <div class="layui-form-item">
                        <div class="layui-form-item magt0" id="hidId">
                            <label class="layui-form-label" >房屋编号:</label>
                            <div class="layui-input-block" style="padding: 5px">
                                <input type="text" name="houseId" id="houseId" autocomplete="off" class="layui-input"
                                       placeholder="请输入房屋编号" style="height: 30px;border-radius: 10px">
                                <%--隐藏房屋id值，当该弹出层有id值时为修改房屋信息，没有id值时为添加新房屋信息--%>
                                <input type="hidden" name="hidHouseId" id="hidHouseId">
                            </div>
                        </div>
                        <label class="layui-form-label">所在城市:</label>
                        <div class="layui-input-block" style="padding: 5px">
                            <input type="text" name="city" autocomplete="off" class="layui-input"
                                   placeholder="请输入所在城市" style="height: 30px;border-radius: 10px">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">所在小区:</label>
                        <div class="layui-input-block" style="padding: 5px">
                            <input type="text" name="community" autocomplete="off" class="layui-input"
                                   placeholder="请输入所在小区" style="height: 30px;border-radius: 10px">
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item magb0">
                <label class="layui-form-label">详细地址:</label>
                <div class="layui-input-block" style="padding: 5px">
                    <input type="text" name="address" autocomplete="off" class="layui-input" lay-verify="required"
                           placeholder="请输入详细地址" style="height: 30px;border-radius: 10px">
                </div>
            </div>
            <div class="layui-form-item magb0">
                <div class="layui-inline">
                    <label class="layui-form-label">房屋售价:</label>
                    <div class="layui-input-block" style="padding: 5px">
                        <input type="text" name="sale" class="layui-input" lay-verify="required|number"
                               placeholder="请输入房屋售价" style="height: 30px;border-radius: 10px">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">物业费:</label>
                    <div class="layui-input-block" style="padding: 5px">
                        <input type="text" name="mgrFee" class="layui-input" lay-verify="required|number"
                               placeholder="请输入物业费" style="height: 30px;border-radius: 10px">
                    </div>
                </div>
            </div>
            <div class="layui-form-item magb0">
                <div class="layui-inline">
                    <label class="layui-form-label">房屋面积:</label>
                    <div class="layui-input-block" style="padding: 5px">
                        <input type="text" name="area" class="layui-input" lay-verify="required|number"
                               placeholder="请输入房屋面积" style="height: 30px;border-radius: 10px">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">中介公司:</label>
                    <div class="layui-input-block" style="padding: 5px">
                        <input type="text" name="company" class="layui-input"
                               placeholder="请输入中介公司" style="height: 30px;border-radius: 10px">
                    </div>
                </div>
            </div>
            <div class="layui-form-item magb0">
                <div class="layui-input-block" style="text-align: center;padding-right: 120px">
                    <button type="button"
                            class="layui-btn layui-btn-normal layui-btn-md layui-icon layui-icon-release layui-btn-radius"
                            lay-filter="doSubmit" lay-submit="">提交
                    </button>
                    <button type="reset"
                            class="layui-btn layui-btn-warm layui-btn-md layui-icon layui-icon-refresh layui-btn-radius">
                        重置
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>

<%--查看大图弹出的层开始--%>
<div id="viewCarImageDiv" style="display: none;text-align: center">
    <img alt="房屋图片" width="700px" height="310px" id="view_houseImg">
</div>

<div style="display:none;padding:20px" id="files_upload" class="layui-upload">
    <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多张图片</button>
    <div class="layui-upload-list">
        <table class="layui-table">
            <thead>
            <tr><th>文件名</th>
                <th>大小</th>
                <th>状态</th>
                <th>操作</th>
            </tr></thead>
            <tbody id="demoList"></tbody>
        </table>
    </div>
    <button type="button" class="layui-btn" id="testListAction">开始上传</button>
</div>

<script type="text/javascript" src="${pageContext.request.contextPath}/static/layui/layui.js"></script>

<script>
    var houseTab;
    var houseIndex;


    layui.extend({
        dtree: '${pageContext.request.contextPath}/static/layui_ext/dtree/dtree'
    }).use(['form', 'layer', 'jquery','table','dtree','upload'], function () {

        var form = layui.form, layer = layui.layer, $ = layui.jquery,table = layui.table , dtree = layui.dtree,upload=layui.upload;

        houseTab =  table.render({
            elem:"#houseTable"
            ,url:"${pageContext.request.contextPath}/house/findAll"
            ,cols:[[
                {type:'checkbox'}
                , {field: 'houseId', title: '房屋编号',   align:"center",sort: true}
                , {field: 'city', title: '所在城市',align:"center" }
                , {field: 'community', title: '所在小区' }
                , {field: 'address', title: '详细地址' }
                , {field: 'sale', title: '房屋售价' }
                , {field: 'mgrFee', title: '物业费' }
                , {field: 'area', title: '房屋面积',align:"center" }
                , {field: 'company', title: '中介公司' }
                ,{fixed: 'right', title:'操作', toolbar: '#barHouse', width:300}
            ]]
            ,toolbar:"#toolbarHouse"
            ,page:true
            ,limits:[1,5,10]
            ,limit:5
        })


        //查询事件
        form.on('submit(doSearch)',function (data) {

            console.info(data.field)
            //重新加载table表格显示用户查询内容
            houseTab.reload({
                where:data.field,
                //重新跳回第一页
                page:{curr:1}
            })
            return false;
        })

        //监听table表格头部的添加和批量删除按钮
        table.on('toolbar(houseTableFilter)',function (obj) {
            if (obj.event == "add"){
                addHouse();
            } else if(obj.event == "delBatch"){
                //获取选中的行数
                var checkStatus = table.checkStatus(obj.config.id)
                //对获取到的对象进行判断
                if (checkStatus.data.length == 0){
                    layer.msg("批量删除也请至少选中一行啊！！！")
                    return false;
                }
                //获取选中行数的房屋对应的id
                var str=""
                for (var i=0; i<checkStatus.data.length;i++){
                    var house=checkStatus.data[i];
                    str += house.houseId + ","
                }
                //
                delBatch(str,checkStatus.data.length)
            }
        })

        //添加房屋信息的函数
        function addHouse() {
            //添加房屋信息是隐藏房屋编号栏
            $("#hidId").hide();
            //弹出菜单
            houseIndex=layer.open({
                type:1,
                title:'添加菜单',
                area:['700px','550px'],
                //菜单显示内容
                content:$('#saveOrUpdateDiv')
            })
            //清除表单内容
            $('#dataFrm').get(0).reset();
            //清除表单的id值
            $("#hidHouseId").val("")
            //表单渲染
            form.render()
            title = "添加"
        }
        //批量删除房屋信息的函数
        function delBatch(str,count){
            layer.confirm("您确定要删除这"+count+"数据吗？",{icon:2,title:'删除'},function (i) {
                $.post("${pageContext.request.contextPath}/house/delAllHouse",{"houseIds":str},function (r) {
                    if (r.code == 0){
                        layer.msg(r.msg,{
                            offset:"15px",
                            icon:1,
                            time:1000
                        },function () {
                            // 关闭当前弹出框
                            layer.close(houseIndex)
                            // 重新加载table
                            houseTab.reload({
                                page:{curr:1}
                            })
                        })
                    } else {
                        layer.msg(r.msg)
                    }
                    // 关闭当前弹出框
                    layer.close(i)
                })
            })
        }


        //给添加或修改弹出层的submit提交按钮添加事件
        form.on('submit(doSubmit)',function (obj) {
            layer.confirm("您确定要"+title+"房屋信息吗？",function (i) {
                $.post("${pageContext.request.contextPath}/house/addOrUpdateHouse",obj.field,function (r) {
                    if(r.code == 0){
                        layer.msg(r.msg, {
                            offset: '15px'
                            ,icon: 1
                            ,time: 1000
                        }, function(){
                            // 关闭当前弹出框
                            layer.close(houseIndex)
                            // 刷新table
                            houseTab.reload({
                                page:{curr:1}
                            })
                        });
                    }else{
                        layer.msg(r.msg)
                    }
                })
            })
        })

        //监听行内工具栏 修改和删除
        table.on('tool(houseTableFilter)',function (obj) {
            if (obj.event == "edit"){
                edit(obj.data)
            }else if (obj.event == "del"){
                del(obj.data)
            }else if(obj.event == "rentHouse"){
                rentHouse(obj.data)
            }else if(obj.event == "viewImg"){
                viewImg(obj.data)
            }else if(obj.event == "filesUpload"){
                filesUpload(obj.data)
            }
        })


        //多文件上传的弹出框
        function filesUpload(data) {
            houseIndex = layer.open({
                type:1
                ,title:"多文件上传"
                ,acceptMime: 'images/*' //限制选择文件类型
                ,area:['1040px','650px']
                ,content:$('#files_upload')
                ,success:function(index){
                    //多文件列表示例
                        var demoListView = $('#demoList')

                        var uploadListIns = upload.render({
                        elem: '#testList'
                        ,url: '${pageContext.request.contextPath}/file/uploadFiles?houseId='+data.houseId //改成您自己的上传接口
                        ,accept: 'images'
                        ,multiple: true
                        ,auto: false
                        , field: 'mfs'
                        ,bindAction: '#testListAction'
                        ,choose: function(obj){
                            var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                            //读取本地文件
                            obj.preview(function(index, file, result){
                                var tr = $(['<tr id="upload-'+ index +'">'
                                    ,'<td>'+ file.name +'</td>'
                                    ,'<td>'+ (file.size/1024).toFixed(1) +'kb</td>'
                                    ,'<td>等待上传</td>'
                                    ,'<td>'
                                    ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                                    ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                                    ,'</td>'
                                    ,'</tr>'].join(''));

                                //单个重传
                                tr.find('.demo-reload').on('click', function(){
                                    obj.upload(index, file);
                                });

                                //删除
                                tr.find('.demo-delete').on('click', function(){
                                    delete files[index]; //删除对应的文件
                                    tr.remove();
                                    uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                                });

                                demoListView.append(tr);
                            });
                        }
                        ,done: function(res, index, upload){
                            if(res.code == 0){ //上传成功
                                var tr = demoListView.find('tr#upload-'+ index)
                                    ,tds = tr.children();
                                tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                                tds.eq(3).html(''); //清空操作

                                layer.msg(res.msg,{
                                    offset: '15px'
                                    ,icon: 1
                                    ,time: 3000
                                },function () {
                                    // 关闭当前弹出框
                                    layer.close(houseIndex)
                                })
                                return delete this.files[index]; //删除文件队列已经上传成功的文件
                            }
                            this.error(index, upload);
                        }
                        ,error: function(index, upload){
                            var tr = demoListView.find('tr#upload-'+ index)
                                ,tds = tr.children();
                            tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                            tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                        }
                        ,success:function (res) {
                                if (res.code == 0){
                                    layer.msg(r.msg,{
                                        offset: '15px'
                                        ,icon: 1
                                        ,time: 1000
                                    },function () {
                                        // 关闭当前弹出框
                                        layer.close(houseIndex)
                                        // 重新加载table
                                        houseTab.reload({
                                            page:{curr:1}
                                        })
                                    })
                                } else {
                                    layer.msg(r.msg)
                                }
                            }
                    });
                }
            })
        }

        function rentHouse(data) {
            houseIndex = layer.open({
                type:1
                ,title:"房屋出租"
                ,area:['700px','500px']
                ,content:$('#saveOrUpdateDiv')
                ,success:function (index,layero) {
                    //给时间控件赋值
                    laydate.render({
                        elem:'#beginDate'
                        ,value:new Date()
                        ,type:'datetime'
                    })
                    laydate.render({
                        elem:"#returnDate"
                        ,type:"datetime"
                    })
                }
            })
            //返回出租单号
            $.post("${pageContext.request.contextPath}/business/rent/rentCodeJson",function (r) {
                $('[name="rentId"]').val(r)
            })

            /*//身份证
            $("#identity1").val($("#identity").val())*/

            /*//车牌号出租价格
            $('[name="carNumber"]').val(data.carNumber)
            $('[name="price"]').val(data.rentPrice)
            $("[name=\"openName\"]").val($("#loginUsername").val())*/
        }



        function viewImg(data){
            houseIndex = layer.open({
                type:1
                ,title:"图片"
                ,area:['1040px','650px']
                ,content:$('#viewCarImageDiv')
                ,success:function(index){
                    $("#view_houseImg").attr("src",data.houseImg)
                }
            })
        }

        //修改房屋信息的函数
        function edit(data) {
            //修改房屋信息是展示房屋编号栏
            $("#hidId").show();
            //设置房屋编号id只读权限
            $("#houseId").attr("readOnly",true);
            //弹出菜单
            houseIndex=layer.open({
                type:1,
                title:'修改菜单',
                area:['700px','550px'],
                //菜单显示内容
                content:$('#saveOrUpdateDiv')
            })
            //把该房屋的信息赋值在表单上
            form.val('dataFrm',data)
            $("#hidHouseId").val(data.houseId);
            //表单渲染
            form.render()
            title = "修改"
        }

        //删除房屋信息的函数
        function del(data) {
            layer.confirm("您确定要删除房屋编号为["+data.houseId+"]的房屋信息吗？",function (i) {
                $.post("${pageContext.request.contextPath}/house/deleteHouse",{"houseId":data.houseId},function (r) {
                    if (r.code == 0){
                        layer.msg(r.msg,{
                            offset: '15px'
                            ,icon: 1
                            ,time: 1000
                        },function () {
                            // 关闭当前弹出框
                            layer.close(houseIndex)
                            // 重新加载table
                            houseTab.reload({
                                page:{curr:1}
                            })
                        })
                    } else {
                        layer.msg(r.msg)
                    }
                })
            })
        }
    })

</script>



</body>
</html>
